<template>
	<div>
		<el-card class="layout-search-card mb-4" shadow="never" :body-style="{ paddingBottom: '0' }">
			<el-form :model="state.queryParams" ref="queryForm" :inline="true">
				<expandCollapse>
					<template #default>
						<el-form-item label="账号：">
							<el-input v-model="state.queryParams.account" placeholder="请输入账号" class="w-[200px]"> </el-input>
						</el-form-item>
						<el-form-item label="手机号：">
							<el-input v-model="state.queryParams.mobile" placeholder="请输入手机号" class="w-[200px]"> </el-input>
						</el-form-item>
					</template>
					<template #extend>
						<el-form-item label="账号：">
							<el-input v-model="state.queryParams.account" placeholder="请输入账号" class="w-[200px]"> </el-input>
						</el-form-item>
						<el-form-item label="昵称：">
							<el-input v-model="state.queryParams.nickname" placeholder="请输入昵称" class="w-[200px]"> </el-input>
						</el-form-item>
						<el-form-item label="手机号：">
							<el-input v-model="state.queryParams.mobile" placeholder="请输入手机号" class="w-[200px]"> </el-input>
						</el-form-item>
						<el-form-item label="分组：" prop="role_id">
							<el-select class="w-[200px]" placeholder="请选择分组" clearable v-model="state.queryParams.role_id">
								<el-option v-for="(item, index) in groupOptionsData" :key="index" :label="item.name" :value="item.id" />
							</el-select>
						</el-form-item>
						<el-form-item label="状态">
							<el-select class="w-[150px]" v-model="state.queryParams.status">
								<el-option label="全部" value="" />
								<el-option label="正常" value="1" />
								<el-option label="禁用" value="0" />
							</el-select>
						</el-form-item>
						<el-form-item label="时间范围：">
							<datePicker v-model:dateTime="state.queryParams.create_time" :isPickerOptions="true" />
						</el-form-item>
					</template>
					<template #footer>
						<el-form-item class="!mr-0">
							<el-button-group>
								<el-button type="primary" icon="ele-Search" @click="searchTable"> 查询 </el-button>
								<el-button icon="ele-Refresh" @click="resetQuery" class="ml15 mr15"> 重置 </el-button>
							</el-button-group>
							<fileExport :fetchFun="userExport" :params="state.queryParams" />
						</el-form-item>
					</template>
				</expandCollapse>
			</el-form>
		</el-card>
		<el-card class="layout-table-card" shadow="never">
			<el-button size="default" v-auth="'user/user/add'" type="primary" class="mb-4" @click="handleAdd()"> 添加用户 </el-button>
			<el-table :data="state.tableList" v-loading="state.loading">
				<el-table-column prop="id" label="ID" width="60" />
				<el-table-column prop="account" label="账号" show-overflow-tooltip></el-table-column>
				<el-table-column label="头像">
					<template #default="{ row }">
						<el-image
							class="w-[30px] h-[30px] flex items-center justify-center"
							:src="row.avatar"
							preview-teleported="true"
							:preview-src-list="[row.avatar]"
							fit="contain"
						/>
					</template>
				</el-table-column>
				<el-table-column prop="nickname" label="昵称" show-overflow-tooltip></el-table-column>
				<el-table-column prop="group_name" label="分组" show-overflow-tooltip></el-table-column>
				<el-table-column prop="status" label="状态" show-overflow-tooltip>
					<template #default="{ row }">
						<el-switch
							v-model="row.status"
							@change="handleUpdateStatus(row)"
							inline-prompt
							:active-value="1"
							:inactive-value="0"
							active-text="正常"
							inactive-text="禁止"
						/>
					</template>
				</el-table-column>
				<el-table-column prop="create_time" label="创建时间" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" width="150">
					<template #default="{ row }">
						<el-button size="small" v-auth="'user/user/edit'" text type="primary" @click="handleEdit(row)">编辑</el-button>
						<el-button size="small" v-auth="'user/user/detail'" text type="primary">
							<router-link :to="{ path: '/user/list/info', query: { id: row.id } }"> 详情 </router-link>
						</el-button>
						<el-button size="small" v-auth="'user/user/tokenInfo'" text type="primary" @click="handleToken(row)">线上管理</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="flex justify-end mt-4">
				<pagination v-model="state" @tableChange="getTableList" />
			</div>
		</el-card>
		<EditDialog v-if="showEditDialog" ref="editRef" @submit="getTableList" @close="showEditDialog = false" />
		<TokenDialog v-if="showTokenDialog" ref="tokenRef" @submit="getTableList" @close="showTokenDialog = false" /> 
	</div>
</template>

<script setup lang="ts" name="userList">
import { reactive, onMounted, ref, nextTick } from 'vue';
import { messageBox } from '/@/utils/message';
import { userLists, userUpdateStatus, userExport } from '/@/api/user/user';
import { usePage } from '/@/hooks/usePage';
import { groupAll } from '/@/api/user/group';
import EditDialog from '/@/views/user/list/component/edit.vue';
import TokenDialog from '/@/views/user/list/component/token.vue';

const editRef = ref();

const showEditDialog = ref(false);

const tokenRef = ref();

const showTokenDialog = ref(false);

const groupOptionsData = ref([]);

const setOptionsData = async () => {
	groupOptionsData.value = await groupAll();
};

// 定义列表
const state = reactive<TableDataState>({
	loading: false,
	tableList: [],
	queryParams: {
		account: '',
		nickname: '',
		mobile: '',
		status: '',
		group_id: '',
		create_time: '',
	},
	tableParams: {
		page_num: 1,
		page_limit: 15,
		page_total: 0 as any,
	},
});

const { getTableList, searchTable, resetQuery } = usePage({ tableData: state, apiData: userLists });

const handleAdd = async () => {
	showEditDialog.value = true;
	nextTick(() => {
		editRef.value?.open('add');
	});
};

const handleEdit = async (row: any) => {
	showEditDialog.value = true;
	nextTick(() => {
		editRef.value?.setFormData(row, () => {
			editRef.value?.open('edit');
		});
	});
};

const handleToken = async (row: any) => {
	showTokenDialog.value = true;
	nextTick(() => {
		tokenRef.value?.setFormData(row, () => {
			tokenRef.value?.open();
		});
	});
};

const handleUpdateStatus = async (row: any) => {
	messageBox(`确定要修改用户状态吗？`).then(async () => {
		await userUpdateStatus({ id: row.id, status: row.status });
		getTableList();
	});
};

onMounted(() => {
	getTableList();
	setOptionsData();
});
</script>
